<template>
  <div class="common-table" v-if="options">
    <el-table
      row-key="id"
      ref="singleTable"
      :data="data"
      :max-height="options.height"
      :stripe="options.isStripe"
      :border="options.isBorder"
      :highlight-current-row="options.isHighlightCurrentRow"
      :row-style="options.rowStyle"
      :cell-style="options.cellStyle"
      :header-row-style="options.headerRowStyle"
      :header-cell-style="options.headerCellStyle"
      v-loading="options.isLoading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" fixed="left" v-if="options.hasSelection"></el-table-column>
      <el-table-column width="50" v-if="options.sortable">
        <el-tooltip class="sort" effect="dark" :content="$t('table.sortTooltip')" placement="right" :hide-after="1000">
          <i class="iconfont iconpaixu"></i></el-tooltip
      ></el-table-column>
      <el-table-column type="index" :label="options.lableIndex" width="55" v-if="options.hasIndex"></el-table-column>
      <template v-for="column in columns">
        <el-table-column
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :sortable="column.hasSort"
          v-if="column.isShow"
          :filters="column.filters"
          :filter-method="column.filterMethod"
          :fixed="column.fixed"
        >
          <template slot="header">
            <template v-if="column.headerFormatter">
              <span v-html="column.headerFormatter()"></span>
            </template>
            <template v-else>
              <span>{{ column.label }}</span>
            </template>
          </template>
          <template slot-scope="scope">
            <template v-if="column.columnFormatter">
              <span v-html="column.columnFormatter(scope.row, column, scope.row[column.prop])"></span>
            </template>
            <template v-else>
              <span>{{ scope.row[column.prop] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        :label="actions.title"
        :width="actions.width"
        ref="fixedColumn"
        fixed="right"
        align="left"
        v-if="actions"
      >
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="link in actions.links">
              <el-link
                v-if="link.handleLinkShow(scope.row)"
                :key="link.label"
                :underline="false"
                :type="link.type"
                :disabled="link.handleLinkDisabled(scope.row)"
                @click.native="link.handleLinkClick(scope.row)"
                >{{ link.label }}</el-link
              >
            </template>
          </div>
          <div class="operate-group">
            <template v-for="button in actions.buttons">
              <el-button
                :key="button.label"
                :type="button.type"
                :icon="button.icon"
                size="mini"
                :disabled="button.handleButtonDisabled(scope.row)"
                :class="button.handleButtonClassName(scope.row)"
                @click.native="button.handleButtonClick(scope.row)"
                >{{ button.label }}</el-button
              >
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  name: 'CommonTable',
  components: {},
  props: {
    options: {
      type: Object,
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    expandColumn: {
      type: Object,
      default: () => {}
    },
    actions: {
      type: Object,
      default: () => {}
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selection: [] // 多选框
    };
  },
  mounted() {
    this.dragSort();
  },
  methods: {
    // 处理改变多选框
    handleSelectionChange(value) {
      this.selection = value;
      this.$emit('handleSelectionChange', value);
    },
    // 拖拽排序
    dragSort() {
      const _this = this;
      const el = _this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      this.sortable = Sortable.create(el, {
        animation: 200,
        handle: '.sort',
        // touchStartThreshold: 10,
        onEnd({ newIndex, oldIndex }) {
          _this.$emit('handleDragSort', { oldIndex: oldIndex, newIndex: newIndex });
          const currRow = _this.data.splice(oldIndex, 1)[0];
          _this.data.splice(newIndex, 0, currRow);
        }
      });
    }
  }
};
</script>

<style scoped>
.common-table {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-table {
  flex: 1;
}
.el-link + .el-link {
  margin-left: 10px;
}
::v-deep .sort:hover {
  font-weight: 600;
  cursor: pointer;
}
</style>
